<template>
    <div class="">
        <van-button :loading="loading" @click="onFollow" v-if="isFollowed" class="follow-btn" round
            size="small">已关注</van-button>
        <van-button :loading="loading" @click="onFollow" v-else class="follow-btn" type="info" color="#3296fa" round
            size="small" icon="plus">关注
        </van-button>
    </div>
</template>

<script>
import { addFollowAPI, delFollowAPI } from '@/api/user'
import { ref } from 'vue'
export default {
  name: 'followBtn',
  props: {
    isFollowed: {
      type: Boolean,
      required: true
    },
    userId: {
      type: [Number, String, Object],
      required: true
    }
  },
  setup (props, content) {
    const loading = ref(false)
    // 关注与取关用户
    const onFollow = async () => {
      // 打开loading
      loading.value = true
      try {
        if (props.isFollowed) {
          // 已关注 取消
          await delFollowAPI(props.userId)
          content.emit('up_is_followed', false)
          // dataList.aticleData.is_followed = false
        } else {
          // 未关注 关注
          await addFollowAPI(props.userId)
          content.emit('up_is_followed', true)
          // dataList.aticleData.is_followed = true
        }
      } catch (err) {
        let message = '操作失败 请重试'
        if (err.response && err.response.status === 400) {
          message = '自己不能关注自己'
        }
        console.log(message)
      }
      // 关闭loading
      loading.value = false
    }

    return {
      onFollow,
      loading
    }
  }
}
</script>

<style scoped lang="less">
.follow-btn {
    width: 170px;
    height: 58px;
    border: 1px solid hwb(210deg 20% 2%);
}
</style>
